<script lang="ts" setup>
import { getMtdeUrl } from '#/utils';
</script>
<template>
  <div class="relative h-[100%] w-screen overflow-hidden">
    <!-- Light 模式背景 -->
    <div
      class="animate-scroll-earth absolute inset-0 bg-[length:auto_100%] bg-repeat-x shadow-inner dark:hidden"
      :style="{ backgroundImage: `url('${getMtdeUrl('map')}')` }"
    ></div>

    <!-- Dark 模式背景 -->
    <div
      class="animate-scroll-earth absolute inset-0 hidden bg-[length:auto_100%] bg-repeat-x shadow-inner dark:block"
      :style="{ backgroundImage: `url('${getMtdeUrl('map-1')}')` }"
    ></div>

    <div class="absolute inset-0 flex items-center justify-center">
      <h1 class="text-4xl font-bold text-white drop-shadow-lg md:text-5xl">
        多时态数字地球
      </h1>
    </div>
  </div>
</template>

<style scoped>
@keyframes scroll-earth {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100% 0;
  }
}

.animate-scroll-earth {
  animation: scroll-earth 20s linear infinite;
}
</style>
